<template>
	<div class="app">
		<h2>求和为: {{ sum }}</h2>
		<h2>名字为: {{ person.name }}</h2>
		<h2>年龄为: {{ person.age }}</h2>
		<h2>汽车为: {{ car }}</h2>
		<button @click="plus">数字+1</button>
		<button @click="changeName">修改名字</button>
		<button @click="changeAge">修改年龄</button>
		<button @click="changePerson">修改整个人</button>
		<button @click="changeBrand">修改品牌</button>
		<button @click="changeColor">修改颜色</button>
		<button @click="changeEngine">修改发动机</button>
		<button @click="changeCarOption">修改选择</button>
		<button @click="changeCar">修改整辆车</button>
	</div>
</template>

<script setup lang="ts" name="App">
import { ref, reactive, shallowRef, shallowReactive } from 'vue';

/**
 * shallowRef 浅层次的,只处理第一层响应式
 * 对象很大的时候,效率更高
 */

let sum = shallowRef(0)
let person = shallowRef({
	name: '张三',
	age: 18
})
let car = shallowReactive({ brand: '海豹', options: { color: '天蓝紫', engine: 'v8' } })

function plus() {
	sum.value += 1
}
function changeName() {
	person.value.name += '$'
}
function changeAge() {
	person.value.age += 1
}
function changePerson() {
	person.value = {
		name: '李四',
		age: 36
	}
}

function changeBrand() {
	car.brand = '奥迪'
}
function changeColor() {
	car.options.color = '灰色'
}
function changeEngine() {
	car.options.engine = 'Y9'
}
function changeCarOption() {
	car.options = { color: '无极红', engine: 'M6' }
}
function changeCar() {
	// car = { brand: '享界', options: { color: '故宫粉', engine: 'Z0' } } // reactive 修饰的对象不能直接修改
	Object.assign(car, { brand: '享界', options: { color: '故宫粉', engine: 'Z0' } })
}
</script>

<style scoped>
.app {
	background-color: skyblue;
	border-radius: 10px;
	box-shadow: 0 0 10px;
	padding: 10px;
}

button {
	margin-left: 10px;
}
</style>